import QtQuick

/*
  自定义组件：按键菜单
  依赖的自定义组件：TextBtn.qml
*/
Item {
    id: spinnerBtnItem
    width: 50
    height: 30

    signal spinnerBtnClicked(var index)

    // 可依据自身需求追加
    property color sbBackColor: "#F0F0F0" // 背景色
    property color sbTextColor: "#FFFFFF" // 文本颜色
    property color sbTitleColor: "#F0F0F0" // 标题颜色
    property string sbTitle: qsTr("按键") // 标题按键文本
    property int sbFontSize: 14 // 字体大小
    property alias sbListModel: spinnerBtnListModel // 下拉菜单按键model
    property double sbBtnWidth: 180 // 下拉菜单按键宽度
    property double sbBtnHeight: 40 // 下拉菜单按键高度
    property int sbTextHAlign: Text.AlignLeft // 下拉菜单按键水平对齐方式
    property color sbHoverColor: "#4F4F4F" // 悬停过渡颜色

    TextBtn {
        id: spinnerBtnTitleBtn
        anchors.fill: parent
        tbText: sbTitle
        tbBackColor: sbTitleColor
        tbColor: sbTextColor
        tbHoverColor: sbHoverColor
        tbFontSize: sbFontSize

        onClicked: {
            focus = true
            spinnerBtnRect.visible = !spinnerBtnRect.visible
//            console.log("spinner visible:" + spinnerBtnRect.visible)
        }

        onFocusChanged: {
            if(!focus) spinnerBtnRect.visible = false
        }
    }

    Rectangle {
        id: spinnerBtnRect
        y: parent.height
        width: sbBtnWidth
        height: sbBtnHeight * spinnerBtnListModel.count
        visible: false
        color: sbBackColor
        radius: 8
        clip: true
        z: 99

        ListModel {
            id: spinnerBtnListModel
            ListElement { mBtnText: "btn1"}
        }

        ListView {
            id: spinnerBtnListView
            anchors.fill: parent
            clip: true
            interactive: false

            model: spinnerBtnListModel
            delegate: Rectangle {
                width: parent.width
                height: sbBtnHeight
                color: "transparent"

                TextBtn {
                    x: 6
                    y: 4
                    width: parent.width - x * 2
                    height: parent.height - y * 2
                    tbText: mBtnText
                    tbBackColor: "transparent"
                    tbColor: sbTextColor
                    tbHoverColor: sbHoverColor
                    tbFontSize: sbFontSize
                    tbTextHAlign: sbTextHAlign
                    tbTextX: 14
                    tbRadius: 8

                    onClicked: {
                        focus = true
                        spinnerBtnClicked(index)
                    }
                }
            }
        }
    }
}
